<template>
  <div id="financialOrder" class="financialOrder">
    <assets-head :title="title" :back-func="backFunc"></assets-head>
    <div class="box-border  ">
      <div class="flex flex-col justify-center items-center px-33">
        <div class="font-32 font-400 my-34 textColor">{{ $t('锁仓金额') }}（USDT）</div>
        <div class="font-66 mb-65 textColor">{{ dataObj.amount }}</div>
      </div>

      <div class=" px-33 boderT12">
        <div class="flex justify-between flex-row items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('锁仓时间') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.cycle == 0 ? $t('无限期') : dataObj.cycle + $t('天') }}</div>
        </div>
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('当日收益') }}</div>M
          <div class="font-31 font-400 textColor">{{ dataObj.profitMay / dataObj.cycle }}&nbsp;{{ dataObj.outputCurrency ?
            dataObj.outputCurrency.toUpperCase() : 'USDT' }}</div>
        </div>
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('已获收益') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.profitAll }}</div>
        </div>
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">剩余天数</div>
          <div class="font-31 font-400 textColor">{{ dataObj.residueCycle + $t('天') }}</div>
        </div>
      </div>
      <div class="px-33 boderT12">
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ dataObj.cycle}}{{ $t('天') }}预期收益</div>
          <div class="font-31 font-400 textColor">{{ dataObj.profitMay }}&nbsp;{{ dataObj.outputCurrency ?
            dataObj.outputCurrency.toUpperCase() : 'USDT' }}</div>
        </div>
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('日收益率') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.dailyRate }}%</div>
        </div>
      </div>

      <div class="px-33 boderT12">
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('起息时间') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.earnTime }}</div>
        </div>
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('到期时间') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.dividendTime ? dataObj.dividendTime : '--' }}</div>
        </div>
      </div>

      <div class="px-33 boderT12">
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('订单编号') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.orderNo }}</div>
        </div>
        <div class="flex justify-between items-center h-98">
          <div class="font-31 font-400 text-grey">{{ $t('订单时间') }}</div>
          <div class="font-31 font-400 textColor">{{ dataObj.createTime }}</div>
        </div>
      </div>
    </div>
    <div class="toast" v-show="toastShow">
				{{toastText}}
			</div>
    <button v-if="this.showBtn" @click="ransom"
      class="text-white btnMain h-97 lh-97 w-762 rounded-lg text-center fixed wz border-none"
      :disabled="!dataObj.canClose" :class="!dataObj.canClose ? 'greyBg textColor1' : ''">{{ $t('我要赎回') }}
    </button>

  </div>
</template>

<script>
import assetsHead from '@/components/Transform/assets-head/index.vue';
import { ransomMachineProduct, getMinerorder } from "@/service/financialManagement.api.js";
import dayjs from "dayjs";
import { showConfirmDialog,showSuccessToast } from 'vant';
export default {
  name: "index",
  components: {
    assetsHead
  },
  data() {
    return {
      type: '',
      orderNo: '',
      showBtn: false,
      toastShow: false,
      compensation:'',
      title: '',
      dataObj: {
        amount: 0,
        cycle: '',
        daily_profit: '',
        profitAll: '',
        days: '',
        daily_rate: '',
        earn_time: '',
        stop_time: '',
        order_no: '',
        create_time: ''
      }
    }
  },
  mounted() {
    this.type = this.$route.query.type
    this.orderNo = this.$route.query.orderNo
    this.showBtn = this.$route.query.showBtn
    this.getOrderDetail()
  },
  methods: {
    backFunc() {
      this.$router.push({
        path: '/cryptos/funds',
        query: {
          tab: 3,
          index: 1 // 0: 查看理财订单 1: 矿机
        }
      })
    },
    ransom() { // 赎回
      showConfirmDialog({
  title: '赎回',
  message:
    '确认赎回,将产生目前订单总收益的60%即是'+(this.dataObj.profitAll * 0.6).toFixed(2)+'的违约金',
})
  .then(() => {
    // on confirm
    ransomMachineProduct({
        orderNo: this.orderNo
      }).then(res => {
        showSuccessToast('成功赎回');
        setTimeout(() => {
          this.backFunc()
        }, 1000)
      })
  })
  .catch(() => {
    // on cancel
  });
      
    },
    getOrderDetail() {
      getMinerorder({
        orderNo: this.orderNo
      }).then(res => {
        this.dataObj = res
        let title = this.$i18n.locale === 'en' ? res.minerName : res.minerName
        this.title = title + ' ' + this.$t('详情')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.financialOrder {
  width: 100%;
  box-sizing: border-box;
}

.wz {
  bottom: 44px;
  left: 32px;
  right: 32px;
}

.boderT12 {
  // @include themify() {
  //   border-top: 1px solid themed("cont_background");
  // }
}
</style>
